import React, { useState } from 'react';
import { Button, Table, Tag } from 'antd';
import { StatusModal } from './com/model'; // 引入Modal组件

const { Column } = Table;

interface SearchtableProps {
  dataSource: DataType[];
  onPageChange: (page: number, pageSize?: number) => void;
}

export const Searchtable: React.FC<SearchtableProps> = ({ dataSource, onPageChange }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [selectedOrder, setSelectedOrder] = useState<any>(null);

  const handleOpenModal = (record: any) => {
    setSelectedOrder(record); // Store the selected order
    setModalVisible(true); // Open the modal
  };

  const getStatusTag = (status: number) => {
    switch (status) {
      case 0:
        return <Tag color="orange">待支付</Tag>;
      case 1:
        return <Tag color="blue">已发货</Tag>;
      case 2:
        return <Tag color="green">已完成</Tag>;
      default:
        return <Tag>暂无</Tag>;
    }
  };

  return (
    <>
      <Table
        dataSource={dataSource}
        onChange={(pagination) => onPageChange(pagination.current || 1, pagination.pageSize)}
      >
        <Column title="商品名称" dataIndex="prodName" key="prodName" />
        <Column title="商品数量" dataIndex="prodCount" key="prodCount" />
        <Column title="商品价格" dataIndex="price" key="price" />
        <Column title="订单号" dataIndex="orderNumber" key="orderNumber" />
        <Column title="总价" dataIndex="actualTotal" key="actualTotal" />
        <Column
          title="订单状态"
          dataIndex="status"
          key="status"
          render={(status: number) => getStatusTag(status)}
        />
        <Column
          title="操作"
          dataIndex="tags"
          key="tags"
          render={(tags, record: any) => (
            <div className="space-x-4">
              <Button
                type="primary"
                onClick={() => handleOpenModal({ ...record, status: record.status })}
              >
                修改订单状态
              </Button>
              {/* <Button type="primary" onClick={() => handleStatusChange(record, 'newStatus')}>查看</Button> */}
            </div>
          )}
        />
      </Table>

      {/* Modal for changing order status */}
      <StatusModal
        order={selectedOrder}
        visible={modalVisible}
        onClose={() => setModalVisible(false)}
        onSubmit={(newStatus: string) => {
          console.log('New status:', newStatus);
          // You can call the onStatusChange function here to handle the status change
          // onStatusChange(orderId, newStatus);
          setModalVisible(false);
        }}
      />
    </>
  );
};
